<template>
  <div class="search-nav">
    <div
      v-for="(item, index) in navList"
      :key="index"
      :class="[currentIndex === index ? 'active' : '', 'btn']"
      @click="switchNav(index)"
    >
      {{item.title}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'SearchNav',
  data() {
    return {
      currentIndex: 0,
      navList: [
        { title: '待解决', key: 'undo' },
        { title: '已解决', key: 'done' },
        { title: '高悬赏', key: 'reward' },
        { title: '零回答', key: 'noAnswer' }
      ]
    };
  },
  methods: {
    switchNav(index) {
      this.currentIndex = index;
      this.$emit('switchNav', this.navList[index].key);
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .search-nav {
    display: flex;
    margin-top: 10px;
    height: 40px;
    background-color: @mainBgColor;
    .btn {
      padding: 0 20px;
      height: 100%;
      line-height: 40px;
      border-right: 1px solid #67bfc3;
      color: #fff;
      cursor: pointer;
      &.active{
        background: #048c7c;
        box-shadow: 1px 1px 5px inset #08464c;
      }
      &:last-child {
        border: 0;
      }
    }
  }
</style>
